<template>
    <div id="Swipers">
        <swiper :options="swiperOption" ref="mySwiper" v-show="SwiperContent.cycleImgs && SwiperContent.cycleImgs.length > 0">
            <swiper-slide  v-for="(cycleImg,index) in SwiperContent.cycleImgs" :key="index" >
               <div class="swiper-slide">
                    <img v-if="isFullUrl" class="width-full booking-item-top-img" :src="cycleImg"/>
                    <img v-if="!isFullUrl" class="width-full booking-item-top-img" :src="systemImgServerCommon(cycleImg)"/>
                </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
    import  { swiper, swiperSlide }   from 'vue-awesome-swiper'

    export default {
        name: 'Swipers',
        props: {
            SwiperContent: {
                type: Object
            },
            isFullUrl:{
                type:Boolean
            }
        },
        data() {
            return {
                swiperOption: {
                    effect:"coverflow",
                    grabCursor: true,
                    watchSlidesProgress: true,
                    centeredSlides: true,
                    loop: true,
                    loopedSlides: 3,
                    slidesPerView: 3,
                    coverflowEffect: {
                        // rotate: 50,
                        // stretch: 0,
                        // depth: 500,
                        // modifier: 1,
                        // slideShadows : true
                        rotate: 30,
                        stretch: 0,
                        depth: 60,
                        modifier: 6,
                        slideShadows : false
                    },
                    pagination: '.swiper-pagination',
                    paginationType: 'bullets',
                    direction: 'horizontal',
                    observer: true,
                    observeParents: true,
//                    autoplayDisableOnInteraction:false,
                    autoplay: 3000,
                },
            }
        },
        components: {
            swiper,
            swiperSlide,
        },
        mounted(){
            // 初始化轮播图
            this.swiper.slideTo(1, 3000, false)
            // 开始自动播放
            this.swiper.startAutoplay()
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        watch:{
            SwiperContent:function (val) {
                if(Object.keys(val).length){
                    if(this.SwiperContent.cycleImgs.length > 1){
                        this.swiperOption.loop = true;
                    }
                }
            }
        }
    }

</script>
<style lang="scss" scoped>
    @import url($css_root + 'css/swiper.min.css');
    .swiper-pagination-bullet-active{
        width: 16px;
        background-color: #fe4b4b;
    }
    .swiper-slide{
        height: 3.75rem;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
</style>